<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>张明 - 高级前端开发工程师 - 社交招聘平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap/bootstrap/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 基本信息区 */
    .profile-header {
      background-color: white;
      padding: 20px 15px;
    }
    
    .profile-cover {
      height: 120px;
      background: linear-gradient(135deg, #0d6efd, #3b82f6);
      border-radius: 12px;
      margin-bottom: -50px;
      position: relative;
    }
    
    .profile-main {
      display: flex;
      padding-top: 60px;
      gap: 15px;
    }
    
    .profile-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid white;
      flex-shrink: 0;
    }
    
    .profile-info {
      flex: 1;
    }
    
    .profile-name {
      font-size: 22px;
      font-weight: 600;
      color: #333;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .verified-badge {
      color: #0d6efd;
      font-size: 16px;
    }
    
    .profile-title {
      font-size: 16px;
      color: #666;
      margin-bottom: 8px;
    }
    
    .profile-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 13px;
      color: #888;
    }
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    /* 操作按钮区 */
    .action-buttons {
      display: flex;
      gap: 10px;
      padding: 10px 15px;
      background-color: white;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }
    
    .action-btn {
      flex: 1;
      padding: 10px 0;
      border-radius: 8px;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    
    /* 内容标签页 */
    .content-tabs {
      display: flex;
      background-color: white;
      border-bottom: 1px solid #eee;
    }
    
    .content-tab {
      flex: 1;
      padding: 15px 0;
      text-align: center;
      font-size: 16px;
      color: #666;
      position: relative;
    }
    
    .content-tab.active {
      color: #0d6efd;
    }
    
    .content-tab.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 20%;
      right: 20%;
      height: 3px;
      background-color: #0d6efd;
      border-radius: 3px 3px 0 0;
    }
    
    /* 内容区域 */
    .content-section {
      background-color: white;
      margin-bottom: 10px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    .content-header {
      padding: 15px;
      font-size: 17px;
      font-weight: 600;
      color: #333;
      border-bottom: 1px solid #eee;
    }
    
    .content-body {
      padding: 15px;
    }
    
    /* 个人介绍 */
    .introduction {
      font-size: 15px;
      color: #555;
      line-height: 1.6;
    }
    
    /* 作品展示 */
    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
    }
    
    .portfolio-item {
      aspect-ratio: 1;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
    }
    
    .portfolio-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    /* 技能标签 */
    .skills-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .skill-tag {
      padding: 6px 12px;
      background-color: #f0f7ff;
      color: #0d6efd;
      border-radius: 6px;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .skill-level {
      font-size: 12px;
      color: #6ea8fe;
    }
    
    /* 工作经历 */
    .experience-item {
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
    }
    
    .experience-item:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
    
    .experience-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    
    .experience-company {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
    
    .experience-period {
      font-size: 13px;
      color: #888;
    }
    
    .experience-position {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }
    
    .experience-description {
      font-size: 14px;
      color: #555;
      line-height: 1.5;
    }
    
    /* 求职意向 */
    .intention-item {
      display: flex;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
    }
    
    .intention-item:last-child {
      border-bottom: none;
    }
    
    .intention-label {
      width: 90px;
      font-size: 14px;
      color: #888;
      flex-shrink: 0;
    }
    
    .intention-value {
      flex: 1;
      font-size: 14px;
      color: #333;
    }
    
    /* 留言区 */
    .message-list {
      margin-bottom: 15px;
    }
    
    .message-item {
      padding: 15px 0;
      border-bottom: 1px solid #eee;
    }
    
    .message-item:last-child {
      border-bottom: none;
    }
    
    .message-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    
    .message-sender {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .sender-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .sender-name {
      font-size: 15px;
      font-weight: 500;
      color: #333;
    }
    
    .message-time {
      font-size: 12px;
      color: #888;
      display: flex;
      align-items: flex-end;
    }
    
    .message-content {
      font-size: 14px;
      color: #555;
      margin-bottom: 8px;
      line-height: 1.5;
    }
    
    .message-actions {
      display: flex;
      gap: 15px;
      font-size: 13px;
    }
    
    .message-action {
      color: #0d6efd;
      display: flex;
      align-items: center;
      gap: 3px;
    }
    
    /* 回复区 */
    .reply-list {
      margin-left: 44px;
      margin-top: 10px;
    }
    
    .reply-item {
      padding: 8px 0;
      border-bottom: 1px dashed #eee;
    }
    
    .reply-item:last-child {
      border-bottom: none;
    }
    
    .reply-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    
    .reply-sender {
      font-size: 13px;
      font-weight: 500;
      color: #333;
    }
    
    .reply-time {
      font-size: 11px;
      color: #888;
    }
    
    .reply-content {
      font-size: 13px;
      color: #555;
    }
    
    /* 留言输入区 */
    .message-input-container {
      position: sticky;
      bottom: 0;
      background-color: white;
      padding: 10px 15px;
      border-top: 1px solid #eee;
    }
    
    .message-input-group {
      display: flex;
      gap: 10px;
      align-items: flex-end;
    }
    
    .message-input {
      flex: 1;
      border: 1px solid #eee;
      border-radius: 20px;
      padding: 10px 15px;
      font-size: 14px;
      resize: none;
      height: 44px;
      overflow-y: auto;
    }
    
    .message-input:focus {
      outline: none;
      border-color: #0d6efd;
    }
    
    .send-button {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: #0d6efd;
      color: white;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
    }
    
    .nav-item.active {
      color: #0d6efd;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 内容面板 */
    .content-panel {
      display: none;
    }
    
    .content-panel.active {
      display: block;
    }
    
    /* 模态框 */
    .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
    }
    
    .modal-backdrop.active {
      display: flex;
    }
    
    .modal-content {
      background-color: white;
      border-radius: 12px;
      width: 90%;
      max-width: 400px;
      max-height: 80vh;
      overflow-y: auto;
    }
    
    .modal-header {
      padding: 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .modal-close {
      background: none;
      border: none;
      font-size: 20px;
      color: #999;
    }
    
    .modal-body {
      padding: 15px;
    }
    
    .modal-footer {
      padding: 15px;
      border-top: 1px solid #eee;
      display: flex;
      gap: 10px;
    }
    
    .modal-btn {
      flex: 1;
      padding: 10px;
      border-radius: 8px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-dark" id="back-btn">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">个人详情</h1>
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-share-alt"></i>
    </button>
  </div>
  
  <!-- 基本信息区 -->
  <div class="profile-header">
    <div class="profile-cover"></div>
    <div class="profile-main">
      <img src="https://picsum.photos/200/200?random=1" class="profile-avatar" alt="张明的头像">
      <div class="profile-info">
        <div class="profile-name">
          张明 <i class="fa fa-check-circle verified-badge"></i>
        </div>
        <div class="profile-title">高级前端开发工程师</div>
        <div class="profile-meta">
          <div class="meta-item"><i class="fa fa-calendar"></i> 30岁</div>
          <div class="meta-item"><i class="fa fa-graduation-cap"></i> 本科</div>
          <div class="meta-item"><i class="fa fa-briefcase"></i> 5年经验</div>
          <div class="meta-item"><i class="fa fa-map-marker"></i> 北京市</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 操作按钮区 -->
  <div class="action-buttons">
    <button class="btn btn-outline-primary action-btn" id="message-btn">
      <i class="fa fa-comment-o"></i> 沟通
    </button>
    <button class="btn btn-outline-secondary action-btn" id="favorite-btn">
      <i class="fa fa-star-o"></i> 收藏
    </button>
    <button class="btn btn-primary action-btn" id="offer-btn">
      <i class="fa fa-paper-plane"></i> 发offer
    </button>
  </div>
  
  <!-- 内容标签页 -->
  <div class="content-tabs">
    <div class="content-tab active" data-tab="info">基本信息</div>
    <div class="content-tab" data-tab="experience">工作经历</div>
    <div class="content-tab" data-tab="portfolio">作品集</div>
    <div class="content-tab" data-tab="messages">留言</div>
  </div>
  
  <!-- 基本信息面板 -->
  <div class="content-panel active" id="info-panel">
    <div class="content-section">
      <div class="content-header">个人介绍</div>
      <div class="content-body">
        <p class="introduction">
          5年前端开发经验，精通Vue、React等主流框架，参与过多个大型项目的架构设计和开发工作。熟悉前端工程化和性能优化，有团队管理经验。
          <br><br>
          曾主导多个企业级应用的前端架构设计与实现，优化前端加载速度提升60%以上，用户体验得到显著改善。擅长跨团队协作，具有良好的沟通能力和问题解决能力。
          <br><br>
          目前正在寻找有挑战性的技术岗位，期待加入有活力的团队，共同打造优秀的产品。
        </p>
      </div>
    </div>
    
    <div class="content-section">
      <div class="content-header">技能特长</div>
      <div class="content-body">
        <div class="skills-grid">
          <div class="skill-tag">
            Vue.js <span class="skill-level">精通</span>
          </div>
          <div class="skill-tag">
            React <span class="skill-level">精通</span>
          </div>
          <div class="skill-tag">
            JavaScript <span class="skill-level">精通</span>
          </div>
          <div class="skill-tag">
            TypeScript <span class="skill-level">熟练</span>
          </div>
          <div class="skill-tag">
            Webpack <span class="skill-level">熟练</span>
          </div>
          <div class="skill-tag">
            HTML5/CSS3 <span class="skill-level">精通</span>
          </div>
          <div class="skill-tag">
            性能优化 <span class="skill-level">熟练</span>
          </div>
          <div class="skill-tag">
            团队管理 <span class="skill-level">熟练</span>
          </div>
          <div class="skill-tag">
            前端工程化 <span class="skill-level">熟练</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="content-section">
      <div class="content-header">求职意向</div>
      <div class="content-body">
        <div class="intention-item">
          <div class="intention-label">意向职位</div>
          <div class="intention-value">前端开发工程师、高级前端开发工程师、技术专家</div>
        </div>
        <div class="intention-item">
          <div class="intention-label">期望薪资</div>
          <div class="intention-value">18k-25k/月</div>
        </div>
        <div class="intention-item">
          <div class="intention-label">工作地点</div>
          <div class="intention-value">北京市、远程</div>
        </div>
        <div class="intention-item">
          <div class="intention-label">到岗时间</div>
          <div class="intention-value">随时到岗</div>
        </div>
        <div class="intention-item">
          <div class="intention-label">工作性质</div>
          <div class="intention-value">全职</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 工作经历面板 -->
  <div class="content-panel" id="experience-panel">
    <div class="content-section">
      <div class="content-header">工作经历</div>
      <div class="content-body">
        <div class="experience-item">
          <div class="experience-header">
            <div class="experience-company">科技创新有限公司</div>
            <div class="experience-period">2020.03 - 至今</div>
          </div>
          <div class="experience-position">高级前端开发工程师 / 前端技术负责人</div>
          <div class="experience-description">
            负责公司核心产品的前端架构设计与开发，带领5人前端团队完成多个重要项目：
            <br><br>
            1. 重构公司核心管理系统，采用Vue3 + TypeScript技术栈，提升开发效率40%，页面加载速度提升60%
            <br><br>
            2. 设计并实现公司组件库，封装常用组件50+，统一产品UI风格，减少重复开发
            <br><br>
            3. 优化前端构建流程，引入自动化测试，将线上bug率降低70%
            <br><br>
            4. 参与产品需求讨论，提供前端技术方案，推动产品体验优化
          </div>
        </div>
        
        <div class="experience-item">
          <div class="experience-header">
            <div class="experience-company">互联网科技有限公司</div>
            <div class="experience-period">2018.06 - 2020.02</div>
          </div>
          <div class="experience-position">前端开发工程师</div>
          <div class="experience-description">
            参与电商平台前端开发与维护工作：
            <br><br>
            1. 负责商品详情页、购物车、结算流程等核心模块的开发
            <br><br>
            2. 优化移动端页面性能，解决各种兼容性问题
            <br><br>
            3. 参与前端工程化建设，编写构建脚本和开发规范
          </div>
        </div>
        
        <div class="experience-item">
          <div class="experience-header">
            <div class="experience-company">软件开发有限公司</div>
            <div class="experience-period">2016.07 - 2018.05</div>
          </div>
          <div class="experience-position">前端开发工程师</div>
          <div class="experience-description">
            参与企业官网和内部系统的前端开发：
            <br><br>
            1. 使用jQuery、Bootstrap等技术开发企业展示网站
            <br><br>
            2. 开发内部管理系统，优化用户操作流程
            <br><br>
            3. 与后端团队协作，完成数据交互和页面渲染
          </div>
        </div>
      </div>
    </div>
    
    <div class="content-section">
      <div class="content-header">教育经历</div>
      <div class="content-body">
        <div class="experience-item">
          <div class="experience-header">
            <div class="experience-company">计算机科技大学</div>
            <div class="experience-period">2012.09 - 2016.06</div>
          </div>
          <div class="experience-position">计算机科学与技术 / 本科</div>
          <div class="experience-description">
            主修课程：数据结构、算法分析、计算机网络、操作系统、数据库原理等
            <br><br>
            在校期间参与多个编程竞赛，获得校级二等奖1次，三等奖2次
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 作品集面板 -->
  <div class="content-panel" id="portfolio-panel">
    <div class="content-section">
      <div class="content-header">项目作品</div>
      <div class="content-body">
        <div class="experience-item">
          <div class="experience-header">
            <div class="experience-company">企业管理系统</div>
            <div class="experience-period">2021.05 - 2021.12</div>
          </div>
          <div class="experience-position">前端架构设计与核心开发</div>
          <div class="experience-description">
            基于Vue3 + TypeScript开发的企业级管理系统，包含用户管理、权限控制、数据统计等功能模块，支持多终端适配。
          </div>
          
          <div class="portfolio-grid" style="margin-top: 10px;">
            <div class="portfolio-item">
              <img src="https://picsum.photos/300/300?random=10" alt="项目截图1">
            </div>
            <div class="portfolio-item">
              <img src="https://picsum.photos/300/300?random=11" alt="项目截图2">
            </div>
            <div class="portfolio-item">
              <img src="https://picsum.photos/300/300?random=12" alt="项目截图3">
            </div>
          </div>
        </div>
        
        <div class="experience-item">
          <div class="experience-header">
            <div class="experience-company">电商平台移动端</div>
            <div class="experience-period">2019.03 - 2019.09</div>
          </div>
          <div class="experience-position">核心功能开发</div>
          <div class="experience-description">
            基于React开发的电商平台移动端，包含商品展示、购物车、结算、订单管理等功能，采用PWA技术实现离线访问。
          </div>
          
          <div class="portfolio-grid" style="margin-top: 10px;">
            <div class="portfolio-item">
              <img src="https://picsum.photos/300/300?random=13" alt="项目截图4">
            </div>
            <div class="portfolio-item">
              <img src="https://picsum.photos/300/300?random=14" alt="项目截图5">
            </div>
            <div class="portfolio-item">
              <img src="https://picsum.photos/300/300?random=15" alt="项目截图6">
            </div>
          </div>
        </div>
        
        <div class="experience-item">
          <div class="experience-header">
            <div class="experience-company">前端组件库</div>
            <div class="experience-period">2020.06 - 2020.10</div>
          </div>
          <div class="experience-position">架构设计与核心组件开发</div>
          <div class="experience-description">
            基于Vue开发的企业级UI组件库，包含50+常用组件，支持主题定制和按需加载，文档采用Storybook构建。
          </div>
          
          <div class="portfolio-grid" style="margin-top: 10px;">
            <div class="portfolio-item">
              <img src="https://picsum.photos/300/300?random=16" alt="项目截图7">
            </div>
            <div class="portfolio-item">
              <img src="https://picsum.photos/300/300?random=17" alt="项目截图8">
            </div>
            <div class="portfolio-item">
              <img src="https://picsum.photos/300/300?random=18" alt="项目截图9">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 留言面板 -->
  <div class="content-panel" id="messages-panel">
    <div class="content-section">
      <div class="content-header">留言列表</div>
      <div class="content-body message-list">
        <div class="message-item">
          <div class="message-header">
            <div class="message-sender">
              <img src="https://picsum.photos/200/200?random=5" class="sender-avatar" alt="李经理的头像">
              <div class="sender-name">李经理（技术部）</div>
            </div>
            <div class="message-time">2023-06-15 14:30</div>
          </div>
          <div class="message-content">
            您好，我们公司正在招聘高级前端开发工程师，看到您的简历非常符合我们的要求，请问您对我们公司感兴趣吗？
          </div>
          <div class="message-actions">
            <div class="message-action reply-trigger" data-id="1">
              <i class="fa fa-reply"></i> 回复
            </div>
            <div class="message-action">
              <i class="fa fa-thumbs-o-up"></i> 点赞
            </div>
          </div>
          
          <!-- 回复列表 -->
          <div class="reply-list">
            <div class="reply-item">
              <div class="reply-header">
                <div class="reply-sender">张明</div>
                <div class="reply-time">2023-06-15 15:45</div>
              </div>
              <div class="reply-content">
                您好，感谢您的关注，我对贵公司的职位很感兴趣，方便详细了解一下吗？
              </div>
            </div>
            <div class="reply-item">
              <div class="reply-header">
                <div class="reply-sender">李经理（技术部）</div>
                <div class="reply-time">2023-06-15 16:20</div>
              </div>
              <div class="reply-content">
                我们公司主要做企业SaaS服务，目前需要一位能负责核心产品前端架构的工程师，技术栈是Vue3，您方便留下联系方式吗？
              </div>
            </div>
          </div>
        </div>
        
        <div class="message-item">
          <div class="message-header">
            <div class="message-sender">
              <img src="https://picsum.photos/200/200?random=6" class="sender-avatar" alt="王总监的头像">
              <div class="sender-name">王总监（产品部）</div>
            </div>
            <div class="message-time">2023-06-10 09:15</div>
          </div>
          <div class="message-content">
            看了您的项目经历，对您做的组件库很感兴趣，我们团队正在做类似的事情，想请教一些问题，不知是否方便？
          </div>
          <div class="message-actions">
            <div class="message-action reply-trigger" data-id="2">
              <i class="fa fa-reply"></i> 回复
            </div>
            <div class="message-action">
              <i class="fa fa-thumbs-o-up"></i> 点赞
            </div>
          </div>
          
          <!-- 回复列表 -->
          <div class="reply-list">
            <div class="reply-item">
              <div class="reply-header">
                <div class="reply-sender">张明</div>
                <div class="reply-time">2023-06-10 10:30</div>
              </div>
              <div class="reply-content">
                您好，没问题，很乐意交流经验，您有什么问题可以直接在这里问我。
              </div>
            </div>
          </div>
        </div>
        
        <div class="message-item">
          <div class="message-header">
            <div class="message-sender">
              <img src="https://picsum.photos/200/200?random=7" class="sender-avatar" alt="赵总的头像">
              <div class="sender-name">赵总（某科技公司）</div>
            </div>
            <div class="message-time">2023-06-05 16:40</div>
          </div>
          <div class="message-content">
            我们公司正在扩张，急需前端技术负责人，薪资可以给到您期望的上限，甚至更高，方便约个时间聊聊吗？
          </div>
          <div class="message-actions">
            <div class="message-action reply-trigger" data-id="3">
              <i class="fa fa-reply"></i> 回复
            </div>
            <div class="message-action">
              <i class="fa fa-thumbs-o-up"></i> 点赞
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 留言输入区 -->
    <div class="message-input-container">
      <div class="message-input-group">
        <textarea class="message-input" placeholder="写下您想咨询的问题..." id="new-message-input"></textarea>
        <button class="send-button" id="send-message-btn">
          <i class="fa fa-paper-plane"></i>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-briefcase nav-icon"></i>
      <span>职位</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-users nav-icon"></i>
      <span>人才</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- 回复模态框 -->
  <div class="modal-backdrop" id="reply-modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">回复留言</h3>
        <button class="modal-close" id="close-reply-modal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <textarea class="message-input" style="width: 100%;" rows="5" id="reply-input" placeholder="请输入回复内容..."></textarea>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary modal-btn" id="cancel-reply-btn">取消</button>
        <button class="btn btn-primary modal-btn" id="submit-reply-btn">发送</button>
      </div>
    </div>
  </div>
  
  <!-- 发送Offer模态框 -->
  <div class="modal-backdrop" id="offer-modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">发送工作邀请</h3>
        <button class="modal-close" id="close-offer-modal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label" style="font-weight: 500;">职位名称</label>
          <input type="text" class="form-control" placeholder="请输入职位名称">
        </div>
        <div class="mb-3">
          <label class="form-label" style="font-weight: 500;">薪资范围</label>
          <input type="text" class="form-control" placeholder="请输入薪资范围">
        </div>
        <div class="mb-3">
          <label class="form-label" style="font-weight: 500;">工作地点</label>
          <input type="text" class="form-control" placeholder="请输入工作地点">
        </div>
        <div class="mb-3">
          <label class="form-label" style="font-weight: 500;">邀请留言</label>
          <textarea class="form-control" rows="4" placeholder="请输入邀请留言..."></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary modal-btn" id="cancel-offer-btn">取消</button>
        <button class="btn btn-primary modal-btn" id="send-offer-btn">发送邀请</button>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 内容标签页切换
    const contentTabs = document.querySelectorAll('.content-tab');
    const contentPanels = document.querySelectorAll('.content-panel');
    
    contentTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 切换标签激活状态
        contentTabs.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的内容面板
        const tabId = this.getAttribute('data-tab');
        contentPanels.forEach(panel => {
          panel.classList.remove('active');
        });
        document.getElementById(`${tabId}-panel`).classList.add('active');
        
        // 如果切换到留言面板，自动聚焦到输入框
        if (tabId === 'messages') {
          setTimeout(() => {
            document.getElementById('new-message-input').focus();
          }, 300);
        }
      });
    });
    
    // 收藏功能
    const favoriteBtn = document.getElementById('favorite-btn');
    favoriteBtn.addEventListener('click', function() {
      const icon = this.querySelector('i');
      if (icon.classList.contains('fa-star-o')) {
        icon.classList.remove('fa-star-o');
        icon.classList.add('fa-star', 'text-warning');
        this.innerHTML = '<i class="fa fa-star text-warning"></i> 已收藏';
        alert('已收藏该求职者');
      } else {
        icon.classList.remove('fa-star', 'text-warning');
        icon.classList.add('fa-star-o');
        this.innerHTML = '<i class="fa fa-star-o"></i> 收藏';
        alert('已取消收藏');
      }
    });
    
    // 发offer功能
    const offerBtn = document.getElementById('offer-btn');
    const offerModal = document.getElementById('offer-modal');
    const closeOfferModal = document.getElementById('close-offer-modal');
    const cancelOfferBtn = document.getElementById('cancel-offer-btn');
    const sendOfferBtn = document.getElementById('send-offer-btn');
    
    offerBtn.addEventListener('click', function() {
      offerModal.classList.add('active');
    });
    
    function hideOfferModal() {
      offerModal.classList.remove('active');
    }
    
    closeOfferModal.addEventListener('click', hideOfferModal);
    cancelOfferBtn.addEventListener('click', hideOfferModal);
    
    sendOfferBtn.addEventListener('click', function() {
      alert('工作邀请已发送');
      hideOfferModal();
    });
    
    // 点击模态框外部关闭
    offerModal.addEventListener('click', function(e) {
      if (e.target === this) {
        hideOfferModal();
      }
    });
    
    // 沟通按钮 - 切换到留言面板
    const messageBtn = document.getElementById('message-btn');
    messageBtn.addEventListener('click', function() {
      // 切换到留言标签页
      contentTabs.forEach(t => t.classList.remove('active'));
      document.querySelector('.content-tab[data-tab="messages"]').classList.add('active');
      
      // 显示留言面板
      contentPanels.forEach(panel => {
        panel.classList.remove('active');
      });
      document.getElementById('messages-panel').classList.add('active');
      
      // 聚焦到输入框
      setTimeout(() => {
        document.getElementById('new-message-input').focus();
      }, 300);
    });
    
    // 发送新留言
    const newMessageInput = document.getElementById('new-message-input');
    const sendMessageBtn = document.getElementById('send-message-btn');
    
    function sendNewMessage() {
      const messageText = newMessageInput.value.trim();
      if (messageText) {
        // 在实际应用中，这里会发送请求到服务器
        alert('留言已发送');
        newMessageInput.value = '';
        
        // 自动调整输入框高度
        adjustTextareaHeight(newMessageInput);
      }
    }
    
    sendMessageBtn.addEventListener('click', sendNewMessage);
    
    newMessageInput.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendNewMessage();
      }
    });
    
    // 调整文本框高度
    function adjustTextareaHeight(textarea) {
      textarea.style.height = 'auto';
      const scrollHeight = textarea.scrollHeight;
      // 限制最大高度为100px
      textarea.style.height = Math.min(scrollHeight, 100) + 'px';
    }
    
    newMessageInput.addEventListener('input', function() {
      adjustTextareaHeight(this);
    });
    
    // 回复功能
    const replyTriggers = document.querySelectorAll('.reply-trigger');
    const replyModal = document.getElementById('reply-modal');
    const closeReplyModal = document.getElementById('close-reply-modal');
    const cancelReplyBtn = document.getElementById('cancel-reply-btn');
    const submitReplyBtn = document.getElementById('submit-reply-btn');
    const replyInput = document.getElementById('reply-input');
    let currentReplyId = null;
    
    replyTriggers.forEach(trigger => {
      trigger.addEventListener('click', function() {
        currentReplyId = this.getAttribute('data-id');
        replyInput.value = '';
        replyModal.classList.add('active');
        replyInput.focus();
      });
    });
    
    function hideReplyModal() {
      replyModal.classList.remove('active');
      currentReplyId = null;
    }
    
    closeReplyModal.addEventListener('click', hideReplyModal);
    cancelReplyBtn.addEventListener('click', hideReplyModal);
    
    submitReplyBtn.addEventListener('click', function() {
      const replyText = replyInput.value.trim();
      if (replyText && currentReplyId) {
        // 在实际应用中，这里会发送请求到服务器
        alert('回复已发送');
        hideReplyModal();
      }
    });
    
    // 点击模态框外部关闭
    replyModal.addEventListener('click', function(e) {
      if (e.target === this) {
        hideReplyModal();
      }
    });
    
    // 点赞功能
    const likeButtons = document.querySelectorAll('.message-action .fa-thumbs-o-up');
    likeButtons.forEach(button => {
      button.addEventListener('click', function(e) {
        e.stopPropagation();
        if (this.classList.contains('fa-thumbs-o-up')) {
          this.classList.remove('fa-thumbs-o-up');
          this.classList.add('fa-thumbs-up', 'text-warning');
        } else {
          this.classList.remove('fa-thumbs-up', 'text-warning');
          this.classList.add('fa-thumbs-o-up');
        }
      });
    });
    
    // 返回按钮
    document.getElementById('back-btn').addEventListener('click', function() {
      // 在实际应用中，这里会返回上一页
      alert('返回人才列表');
    });
  </script>
</body>
</html>
